import type { DrawingMode } from '../../draw/types';
import styles from './index.module.less';

type ControlPanelProps = {
  mode: DrawingMode;
  color: string;
  lineWidth: number;
  cursorPosition?: { x: number; y: number };
  onModeChange: (mode: DrawingMode) => void;
  onColorChange: (color: string) => void;
  onLineWidthChange: (width: number) => void;
  onResetView: () => void;
  onClearCanvas: () => void;
};

export function ControlPanel({
  mode,
  color,
  lineWidth,
  cursorPosition,
  onModeChange,
  onColorChange,
  onLineWidthChange,
  onResetView,
  onClearCanvas,
}: ControlPanelProps) {
  const modes: { value: DrawingMode; label: string }[] = [
    { value: 'select', label: '选择' },
    { value: 'draw', label: '绘制' },
    { value: 'rectangle', label: '矩形' },
    { value: 'circle', label: '圆形' },
    { value: 'path', label: '路径' },
    { value: 'cube', label: '立方体' },
  ];

  return (
    <div className={styles.controlPanel}>
      <div className={styles.modeGroup}>
        {modes.map((m) => (
          <button
            type="button"
            key={m.value}
            className={mode === m.value ? styles.active : ''}
            onClick={() => onModeChange(m.value)}
          >
            {m.label}
          </button>
        ))}
      </div>

      <div className={styles.controlGroup}>
        <label htmlFor="stroke-color">颜色:</label>
        <input
          type="color"
          id="stroke-color"
          value={color}
          onChange={(e) => onColorChange(e.target.value)}
        />

        <label htmlFor="stroke-width">粗细:</label>
        <input
          type="range"
          id="stroke-width"
          min="1"
          max="20"
          value={lineWidth}
          onChange={(e) => onLineWidthChange(Number(e.target.value))}
        />
        <span>{lineWidth}</span>
      </div>

      <div className={styles.controlGroup}>
        <button
          type="button"
          className={styles.actionButton}
          onClick={onResetView}
        >
          回到原点
        </button>
        <button
          type="button"
          className={styles.actionButton}
          onClick={onClearCanvas}
        >
          清空画布
        </button>
      </div>

      {cursorPosition && (
        <div className={styles.positionInfo}>
          X: {cursorPosition.x.toFixed(1)}, Y: {cursorPosition.y.toFixed(1)}
        </div>
      )}
    </div>
  );
}
